<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>? + ? = ?</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="./lib/prototype.js" type="text/javascript"></script>
  <script src="./lib/scriptaculous.js" type="text/javascript"></script>
  <script type="text/javascript" src="./yahoo/yahoodomevent/yahoo-dom-event.js"></script>
  <script type="text/javascript" src="./yahoo/history/history-beta-min.js"></script>
  <script type="text/javascript" language="javascript">
  // <![CDATA[
'a big blockquote br b center code div em form h1 h2 h3 h4 h5 h6 hr img iframe input i li ol option pre p script select small span strong style sub sup table tbody td textarea th tr ul u'.split(' ').each(function(e) {
  window['$' + e] = function() {
    if (arguments[0]) {
      if (arguments[0].nodeType) return Builder.node(e,$A(arguments));
      if (arguments[1]) return Builder.node(e,arguments[0],$A(arguments).slice(1));
      return Builder.node(e,arguments[0]);
    };
    return Builder.node(e);
  }
});


window['$kform'] = function() {
  var e = 'form';
  if (arguments[0]) {
    if (arguments[0].nodeType) return Builder.node(e,$A(arguments));
    if (arguments[1]) {
      if (arguments[0].action) {
	var kurl = cont_table.push(arguments[0].action) - 1;  
	arguments[0].action = 'javascript:' + 'navi(' + kurl + ')';
	var el = Builder.node(e,arguments[0],$A(arguments).slice(1));
	q_table[kurl] = function () {
	  return el.serialize().toQueryParams();
	};
	return el;
      };
      return Builder.node(e,arguments[0],$A(arguments).slice(1));
    };
    return Builder.node(e,arguments[0]);
  };
  return Builder.node(e);
};

var cont_table = [];
var q_table = [];

// show :: Element -> IO ()
function show(el){
  //remove all children from <div id="main">.
  var e = $('main');
  while (e.firstChild) e.removeChild(e.firstChild);
  e.appendChild(el);
}

// navi :: Number -> IO ()
function navi(kurl) {
 YAHOO.util.History.navigate('kurl',String(kurl));
}

// do_action :: Number -> IO ()
function do_action(kurl) {
  if (typeof q_table[kurl] === 'function')
    q_table[kurl] = q_table[kurl].call();
  var cont = cont_table[kurl];
  cont(q_table[kurl]);
}

// main :: Hash -> IO ()
function main(query) {
  show($div($h1('? + ? = ?'),
	    'please input number',$br(),
	    $kform({action:
		    function(query) {
		      var x = query['x'];
		      show($div($h1(x + ' + ? = ?'),
				'please input number',$br(),
				$kform({action:
					function(query) {
					  var y = query['y'];
					  show($h1(x + ' + ' + y + ' = ' + (parseInt(x,10) + parseInt(y,10))))
					}},
				       $input({name: 'y'}),$br(),
				       $input({type: 'submit'}))));
		    }},
		   $input({name:'x'}),$br(),
		   $input({type: 'submit'}))));
}

  // ]]>
  </script>
</head>
<body>
<script>
YAHOO.util.History.register('kurl', '0', function(state) {
  do_action(Number(state));
} );

YAHOO.util.History.onLoadEvent.subscribe(function() {
  cont_table = new Array();
  q_table = new Array();
  cont_table.push(main);
  q_table.push($H());
  do_action(0);
} );

YAHOO.util.History.initialize();
</script>
<div id="main">Please enable the javascript.</div>
</body>
</html>
